<template>
	<!-- 交卷popup层 -->
	<uni-popup ref="confirmPopupRef" type="center" :is-mask-click="false">
		<view class="question-confirm">
			<view class="title">是否提交?</view>
			<image class="img" src="../../../../static/test-question/confirm.png" mode="widthFix"></image>
			<view class="tips">
				<view class="done">
					<view class="count">{{doneCount}}</view>
					<view class="text">已做</view>
				</view>
				<view class="divider"></view>
				<view class="undone">
					<view class="count">{{undoneCount}}</view>
					<view class="text">未做</view>
				</view>
			</view>
			<view class="btns">
				<view class="left btn" @click="$emit('submitClck')">现在提交</view>
				<view class="right btn" @click="confirmPopupRef.close()">继续答题</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	defineProps({
		doneCount: {
			type: Number,
			default: 0
		},
		undoneCount: {
			type: Number,
			default: 0
		}
	})

	const $emit = defineEmits('submitClick')
	// 提交答题弹出层的实例
	const confirmPopupRef = ref()

	const open = () => {
		confirmPopupRef.value.open()
	}

	const close = () => {
		confirmPopupRef.value.close()
	}

	defineExpose({
		// 暴露显示和隐藏popup的方法
		open,
		close,
	})
</script>

<style lang="scss">
	.question-confirm {
		border-radius: 20rpx;
		width: 500rpx;
		background-color: #FBFDFF;
		padding: 20rpx 20rpx 0;
		text-align: center;

		.title {
			font-size: 28rpx;
			color: #556FE3;
			font-weight: 700;
		}

		.img {
			width: 400rpx;
		}

		.tips {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-size: 28rpx;

			.done {
				color: #FA6F8E;
				font-weight: 700;
			}

			.divider {
				width: 4rpx;
				height: 50rpx;
				background-color: #EEF1F9;
			}

			.undone {
				font-weight: 700;
				color: #647CFD;
			}
		}

		.btns {
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.btn {
				color: #FFF;
				padding: 10rpx 40rpx;
				border-radius: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				margin: 20rpx 0;
			}

			.left {
				background-color: #556FE3;
			}

			.right {
				background-color: #FA6F8E;
			}
		}
	}
</style>